import { defineConfig, presetWind3, presetAttributify, transformerDirectives } from 'unocss';
const reg_matcher = {
    color: '[0-9a-fA-F]{3}|[0-9a-fA-F]{6}',
};

const pos = { l: 'left', r: 'right', t: 'top', b: 'bottom' };
const pos_keys_str = Object.keys(pos).join('|');

const reg = (str) => new RegExp(`^${str}$`);
export default defineConfig({
    content: {
        filesystem: ['./src/**/*.{html,js,ts,jsx,tsx,vue}'],
        // pipeline: {
        //   exclude: ['node_modules', '.git', '.github', '.husky', '.vscode', 'build', 'dist', 'public', './stats.html'],
        // },
    },
    presets: [presetWind3(), presetAttributify()],
    transformers: [transformerDirectives()],
    shortcuts: [
        [
            /abs(-((l|r|t|b|c){1,2}))?$/,
            ([_, m, ...c]) => {
                const base = ['absolute'];
                if (m) {
                    const [_, first, second] = m.split('');
                    if (pos[first]) {
                        base.push(pos[first] + '-0');
                    }
                    if (pos[second]) {
                        base.push(pos[second] + '-0');
                    }
                    if (first === 'c') {
                        base.push('left-50%', 'top-50%', 'transform-translate-middle');
                    }
                }
                return base.join(' ');
            },
        ],
        ['full', 'w-full h-full'],
        ['screen', 'w-screen h-screen'],
        ['f-c-c', 'flex items-center justify-center'],
        ['f-y-c', 'flex items-center'],
        ['f-x-c', 'flex justify-center'],
    ],
    rules: [
        [/^f-(\d+)$/, ([, size]) => ({ 'font-size': `${size}px` })],
        [/^r-(\d+)$/, ([, size]) => ({ 'border-radius': `${size}px` })],
        [reg(`c-(${reg_matcher.color})`), ([, color]) => ({ color: `#${color}` })],
        [reg(`bg-(${reg_matcher.color})`), ([, color]) => ({ 'background-color': `#${color}` })],

        [
            reg(`bor(${pos_keys_str})?(-${reg_matcher.color})?`),
            ([_, p, color = 'ddd']) => {
                p = p ? '-' + pos[p] : '';
                return { ['border' + p]: `1px solid #${color.replace('-', '')}` };
            },
        ],
        ['card-shadow', { 'box-shadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017' }],
    ],
    theme: {
        colors: {
            primary: 'var(--primaryColor)',
        },
    },
});
